<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>网格布局</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 95%;
        --box-height: fit-content;
      }
      body {
        margin: 0;
      }
      .demo-box {
        width: 100% !important;
        height: 100% !important;
      }
      .demo-box > * {
        display: block !important;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .container {
        display: grid;
        background-color: blanchedalmond;
        height: 150px;
        width: 150px;
        border: 1px solid black;
        margin: 10px 0;
      }
      .container.small {
        height: 50px;
        width: 100px;
      }
      .container.long {
        height: 30px;
        width: 300px;
      }
      .container > * {
        border: 1px dashed red;
      }
      .gap-3 {
        gap: 3px;
      }
      .case2-1 {
        grid-template-columns: 50px auto 25%;
        grid-template-rows: auto 30%;
      }
      .case2-2 {
        height: fit-content;
        grid-template-columns: min-content;
      }

      .case3-1 {
        grid-template-columns: 1fr 1fr 1fr;
      }
      .case3-2 {
        grid-template-columns: 0.2fr 0.2fr 0.2fr;
      }
      .case3-3 {
        grid-template-columns: auto 1fr 1fr 1fr;
      }
      .case3-4 {
        grid-template-columns: auto 0.2fr 0.2fr 0.2fr;
      }
      .case4-1.case4-1 {
        height: fit-content;
        grid-template-columns: fit-content(80px) fit-content(80px) 40px auto;
      }
      .case4-1 > * {
        margin: 0;
      }
      .case4-2 {
        grid-template-columns: repeat(auto-fill, 45px);

        resize: horizontal;
        overflow: hidden;
      }
      .case4-3 {
        grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));

        resize: horizontal;
        overflow: hidden;
      }
      .case4-4 {
        grid-template-columns: repeat(auto-fit, 45px);

        resize: horizontal;
        overflow: hidden;
      }
      .case4-5 {
        grid-template-columns: repeat(auto-fit, minmax(45px, 1fr));

        resize: horizontal;
        overflow: hidden;
      }
      .case5-1 {
        grid-template: 1fr 1fr 1fr 1fr / 1fr 1fr 1fr;
        grid-template-areas:
          'one one one'
          'two thr thr'
          'two thr thr'
          'four four four';
      }
      .case5-1 > div:nth-child(1) {
        grid-area: one;
      }
      .case5-1 > div:nth-child(2) {
        grid-area: two;
      }
      .case5-1 > div:nth-child(3) {
        grid-area: thr;
      }
      .case5-1 > div:nth-child(4) {
        grid-area: four;
      }
      .case7-1 {
        grid-template: 1fr 1fr / 1fr 1fr;
        grid-auto-rows: 100px;
      }
      .case8-1 {
        /* 默认值 */
        /* grid-auto-flow: row; */
        grid-template-columns: 1fr 1fr;
        max-height: 80px;
      }
      .case8-2 {
        grid-auto-flow: column;
        grid-template-rows: 1fr 1fr;
        max-height: 50px;
      }
      .case8-3 {
        grid-template-rows: 1fr 1fr;
        max-height: 90px;
      }
      .case8-3 div:first-child {
        grid-column-start: 2;
      }
      .case8-4 {
        grid-template-rows: 1fr 1fr;
        max-height: 90px;
        grid-auto-flow: dense;
      }
      .case8-4 div:first-child {
        grid-column-start: 2;
      }
      .case12-1 {
        grid: 1fr 1fr / 1fr 1fr;
      }
      .case14-1 {
        grid: auto / repeat(6, 1fr);
      }
      .case14-1 > div:first-child {
        grid-column-start: -2;
        grid-column-end: 3;
        background-color: deepskyblue;
      }
      .case14-2 {
        grid: auto / [A-start] 40px [A-end B-start] 50px [B-end C-start] auto [C-end] auto;
      }
      .case14-2 > div:first-child {
        grid-column-start: B;
        grid-column-end: C;
        background-color: deepskyblue;
      }
      .case14-3 {
        grid: auto / [A] 20px [B] 40px [C] 60px;
      }
      .case14-3 > div:first-child {
        grid-column-start: B 3;
        grid-column-end: C;
        background-color: deepskyblue;
      }
      :checked + .case14-3 {
        grid-auto-columns: 40px;
      }
      .case14-4 {
        grid: auto / repeat(6, 1fr);
      }
      .case14-4 > div:first-child {
        grid-column: 3 span;
      }
      .case15-1 {
        grid: repeat(6, 1fr) / repeat(6, 1fr);
      }
      .case15-1 > div:first-child {
        grid-column: span 4;
        grid-row: span 4;
        background-color: deepskyblue;
      }
      .case15-2 {
        grid: [a] 25px [b] 25px [c] 25px [d] 25px [e] 25px [f] 25px [g] / [a] 25px [b] 25px [c] 25px [d] 25px [e] 25px [f] 25px [g];
      }
      .case15-2 > div:first-child {
        grid-column-start: b;
        grid-column-end: span 4;
        grid-row-start: b;
        grid-row-end: span 4;
        background-color: deepskyblue;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./18-弹性布局.html">上一篇</a>
      <a href="./20-shape布局.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>网格布局</dt>
        <dd>
          <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>grid-template-columns 和grid-template-rows</dt>
        <dd>
          <div class="container case2-1">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
          </div>
        </dd>
        <dd>
          <h4>基础/缩写</h4>
          <pre><code class="language-scss">grid-template-columns: 20px 20% auto; // 表示有3列，rows语法与之一致 
grid-template: &lt;columns&gt; / &lt;rows&gt;;
grid: &lt;columns&gt; / &lt;rows&gt;; // 甚至</code></pre>
          <i>grid-template-columns/rows语法</i>
          <pre><code class="language-scss">grid-template-columns:&lt;line-name&gt; &lt;track-size&gt;;</code></pre>
        </dd>
        <dd>
          <h4>&lt;line-name&gt;</h4>
          可以添加道路名（不常用），支持中文。名字是前后共用的
          <pre><code class="language-scss">grid-template-columns:[起始站] 80px [起始站 终点站] 90px;</code></pre>
        </dd>
        <dd>
          <h4>&lt;track-size&gt;</h4>
          <ul>
            <li>长度值</li>
            <li>百分比</li>
            <li>关键字，min-content，max-content，auto</li>
            <li>&lt;flex&gt;，也就是以fr为单位的值</li>
            <li>函数，repeat()，minmax()，fit-content()</li>
          </ul>
          <b>1) min-content</b>
          <br />
          grid布局中，一行（列）总是等高（宽）。min-content所有子项最小内容中的最大值。
          <div class="container case2-2">
            <div>123</div>
            <div>2sss</div>
            <div>ssssssss</div>
            <div>4</div>
          </div>
          <b>2) max-content</b>
          <br />
          所有子项的最大内容中的最大值。
          <br />
          <b>3) auto</b>
          <br />
          尺寸上限是 max(max-content, 响应布局关键字后的尺寸)
          <br />
          尺寸下限是 max(min-content, min-width/min-height)
          <br />
          若有多行设置auto，则是max-content + 伸缩固定值（每行/列相同）
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>&lt;track-size&gt;fr</dt>
        <dd>
          fr是fraction的缩写，表示分数。fr参与对非固定行列的尺寸分配。
          <br />
          <b>可分配尺寸</b>
          = 容器尺寸 - 固定子项尺寸之和。
          <ul>
            <li>
              若所有fr之和大于1，则按比例分配
              <div class="container case3-1 small">
                <div>1</div>
                <div>2</div>
                <div>3</div>
              </div>
              <pre><code>grid-template-columns: 1fr 1fr 1fr;</code></pre>
            </li>
            <li>
              若所有fr之和小于1，则最终尺寸是fr与可自动分配尺寸的积
              <div class="container case3-2 small">
                <div>1</div>
                <div>2</div>
                <div>3</div>
              </div>
              <pre><code>grid-template-columns: .2fr .2fr .2fr;</code></pre>
            </li>
            <li>
              auto的情况：auto项的固定尺寸为fit-content。
              <br />
              先以fr分配可分配空间，若有剩余，再分配给auto。
              <br />
              <b>fr和大于1</b>
              <div class="container case3-3 long">
                <div>auto</div>
                <div>2</div>
                <div>3</div>
                <div>3</div>
              </div>
              <b>fr和小于1</b>
              <div class="container case3-4 long">
                <div>auto</div>
                <div>2</div>
                <div>3</div>
                <div>3</div>
              </div>
            </li>
          </ul>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>&lt;track-size&gt;函数</dt>
        <dd>
          <h4>minmax()</h4>
          <section>
            <p>
              <b>“尺寸在min与max之间”</b>
            </p>
            minmax(min, max);
            <br />
            <i>正式语法：</i>
            <br />
            <pre><code>minmax([ &lt;length&gt; | &lt;percentage&gt; | min-content | max-content | auto],
[ &lt;length&gt; | &lt;percentage&gt; | &lt;flex&gt; | min-content | max-content | auto])</code></pre>
            ps: &lt;flex&gt; 只能是第二个参数
          </section>
        </dd>
        <dd>
          <h4>fit-content()</h4>
          <section style="margin: 10px;">
            <p>
              <b>“尺寸适配内容，但不超过设定尺寸”</b>
            </p>
            <i>正式语法：</i>
            <pre><code>fit-content([ &lt;length&gt; | &lt;percentage&gt;])</code></pre>
            <i>尺寸计算规则：</i>
            <div>
              <pre><code>fit-content(limit) = max(minimum, min(limit, max-content));
  minimum = min(min-width/min-height, min-content)</code></pre>
              limit为设置尺寸，minimum为尺寸下限
            </div>
          </section>
          <section>
            <i>例1：</i>
            <pre><code>fit-content(80px) = max(16px, min(80px, 16 * 7(112) px));</code></pre>
            <div class="container case4-1 long">
              <div>内容少</div>
              <div>内容还是挺多的</div>
              <div>40px</div>
              <div>auto</div>
            </div>
            <i>例2：</i>
            <pre><code>fit-content(80px) = max(somewordnowrap的宽度, min(80px,  16 * 7(112) px));</code></pre>
            <div class="container case4-1 long">
              <div>somewordnowrap</div>
              <div>内容还是挺多的</div>
              <div>40px</div>
              <div>auto</div>
            </div>
          </section>
        </dd>
        <dd>
          <h4>repeat()</h4>
          <section>
            <p>
              <b>“重复n次，且尽量产生网格”</b>
            </p>
            <i>语法</i>
            <br />
            <pre><code>repeat(重复次数 | auto-fill | auto-fit, &lt;track-size&gt;)</code></pre>
          </section>
          <section>
            <b>1) auto-fill</b>
            <br />
            auto-fill不会自动填充剩余空间，且不能同时使用auto，
            如下写法是不合法的
            <pre><code>grid-template-columns: repeat(auto-fill, 45px) auto; </code></pre>
            <i>使用</i>
            <div class="container case4-2 long">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            实际使用一般与minmax连用（请自行拉短）
            <div class="container case4-3 long">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            <pre><code>grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); </code></pre>
            <h3>ps: 空白匿名网格</h3>
            当自动分配后剩余空间还能产生网格，但没有更多的子项时，会生成对应数量的空白网格占位。
            <br />
            <br />
          </section>
          <section>
            <b>2) auto-fit</b>
            <p>
              auto-fit与auto-fill类似。区别在于auto-fit会把
              <b>空白匿名网格</b>
              合并，可以视为变成
              <b>一个</b>
              0px的格子，该格子与实际的格子间可以调整间隙（指gap），但另一侧完全合并消失
            </p>
            <i>查看auto-fill与auto-fit的区别</i>
            <div class="container case4-2 long gap-3">
              <div>fill</div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            <div class="container case4-4 long gap-3">
              <div>fit</div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            故，auto-fit与minmax结合能实现伸缩无间隙
            <div class="container case4-5 long">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
          </section>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>grid-template-areas</dt>
        <dd>
          <h4>语法</h4>
          <pre><code>grid-template-areas: none|itemnames;</code></pre>
          <ul>
            <li>
              <b>.</b>
              表示空的网格单元格
            </li>
            <li>
              <b>none</b>
              表示没有定义网格单元格
            </li>
          </ul>
          1）若没有给网格线命名，则会自动命名，规则是："网格名" + "-row/column"
          + "-start/end"
          <br />
          2）形成区域必须是规整的矩形，否则视为无效
          <div class="container case5-1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>grid-template缩写</dt>
        <dd>
          <ul>
            <li>
              缩写1：
              <pre><code>grid-template: none</code></pre>
            </li>
            <li>
              缩写2：
              <pre><code>grid-template: &lt;grid-template-rows&gt; / &lt;grid-template-columns&gt;</code></pre>
            </li>
            <li>
              缩写3：
              <pre><code>grid-template: [ &lt;line-names&gt;? &lt;string&gt; &lt;track-size&gt; &lt;line-names&gt;? ] + [ / &lt;explicit-track-list&gt; ]?</code></pre>
              <i>例：</i>
              <pre><code>grid-template-areas:
'one one one' 1fr
'two thr thr' 1fr
'two thr thr'
'four four four';</code></pre>
              <pre><code>grid-template-areas:
  [1-开头的路] 'one one one' 1fr [1-结尾的路 2-开头的路]
  'two thr thr' 1fr
  'two thr thr'
  'four four four'
  / [1行-开头的路] 1fr auto;</code></pre>
              1）可以看出，只有&lt;string&gt;是必须的。尺寸省略的话，会使用auto
              <br />
              2）改写法不支持repeat函数
              <br />
            </li>
          </ul>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>grid-auto-columns和grid-auto-rows</dt>
        <dd>
          <p><b>“控制隐式网格的大小”</b></p>
          <i>隐式网格：即指超出规定范围自动生成的网格</i>
          例如下方有5个div作为item：
          <div class="container case7-1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div>该情形只能操控高度，因为一定对齐</div>
          </div>
          <pre><code>grid-template: 1fr 1fr / 1fr 1fr;</code></pre>
          则第五个格子就是隐式网格
        </dd>
        <dd>
          <h4>语法</h4>
          <pre><code>grid-auto-columns: &lt;track-size&gt; // 不支持repeat</code></pre>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>grid-auto-flow</dt>
        该属性相当于flex中的flex-direction
        <dd>
          <h4>语法</h4>
          <pre><code>grid-auto-flow: [ row | column ] || dense</code></pre>
          其中：
          <ul>
            <li>
              <b>row</b>
              ：默认值，未指定位置的网格水平陈列
            </li>
            <li>
              <b>column</b>
              ：未指定位置的网格垂直陈列
            </li>
            <li>
              <b>dense</b>
              ：启用“密集”打包算法，尽可能填充空白块
            </li>
          </ul>
        </dd>
        <dd>
          <h4>row</h4>
          <div class="container case8-1">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
          </div>
        </dd>
        <dd>
          <h4>column</h4>
          <div class="container case8-2">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
          </div>
          <pre><code>grid-auto-flow: column</code></pre>
        </dd>
        <dd>
          <h4>dense</h4>
          右侧使用了dense
          <div style="display: grid; grid-template-columns: 1fr 1fr;">
            <div class="container case8-3">
              <div>1</div>
              <div>2</div>
              <div>3</div>
              <div>4</div>
              <div>5</div>
              <div>6</div>
              <div>7</div>
            </div>
            <div class="container case8-4">
              <div>1</div>
              <div>2</div>
              <div>3</div>
              <div>4</div>
              <div>5</div>
              <div>6</div>
              <div>7</div>
            </div>
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>grid</dt>
        <dd>
          grid缩写属性，是
          <br />
          grid-template-rows
          <br />
          grid-template-columns
          <br />
          grid-template-areas
          <br />
          grid-auto-rows
          <br />
          grid-auto-columns
          <br />
          grid-auto-flow
          <ul>
            <li>
              <i>语法</i>
              <pre><code>grid: none</code></pre>
            </li>
            <li>
              <i>语法</i>
              <pre><code>grid: &lt;grid-template&gt;</code></pre>
              例：
              <pre><code>grid: 1fr 1fr / 1fr 1fr;</code></pre>
            </li>
            <li>
              后跟auto-flow
              <i>语法</i>
              <pre><code>grid: &lt;grid-template-rows&gt; / [ auto-flow && dense? ] &lt;grid-auto-columns&gt;?</code></pre>
              auto-flow根据斜杠位置自动解析，也可以写成row或column
              <br />
              例：
              <pre><code>grid: 1fr 1fr / auto-flow 100px 50px;</code></pre>
              <div
                class="container"
                style="grid: 1fr 1fr / auto-flow 100px 50px;"
              >
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
              </div>
            </li>
            <li>
              前跟auto-flow
              <pre><code>grid: [ auto-flow && dense? ] &lt;grid-template-rows&gt;? / &lt;grid-auto-columns&gt;</code></pre>
            </li>
          </ul>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>间隙设置column-gap/row-gap</dt>
        <dd>
          <p>
            三大布局都可以使用该属性，但兼容感人
          </p>
          <i>语法</i>
          <pre><code>column-gap: &lt;line-size&gt;</code></pre>
        </dd>
        <dt>缩写属性gap</dt>
        <dd>
          <p>
            三大布局都能使用，与其他属性类似，行前列后；或者一个值
          </p>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>对齐属性justify-items和align-items</dt>
        <dd>
          <h4>justify-items</h4>
          <i>语法</i>
          <pre><code>justify-items: stretch | start | end | center</code></pre>
          该属性在弹性布局也有效，但没有任何效果，因为弹性布局没有列的概念。
          <p><strong>常用属性</strong></p>
          <ul>
            <li>
              <b>stretch</b>
              <p>元素尺寸水平拉伸，填满整个网格的水平空间</p>
              <div class="container case12-1" style="justify-items: stretch;">
                <div>
                  <img src="../../Source/pic.jpg" width="40px" />
                </div>
                <div>
                  <img src="../../Source/pic.jpg" width="50px" />
                </div>
                <div>
                  <img src="../../Source/pic.jpg" width="30px" />
                </div>
                <div>
                  <img src="../../Source/pic.jpg" width="60px" />
                </div>
              </div>
            </li>
            <li>
              <b>start</b>
              <p>元素尺寸水平收缩为内容大小，沿着网格线左侧对齐</p>
              <div class="container case12-1" style="justify-items: start;">
                <div>
                  <img src="../../Source/pic.jpg" width="40px" />
                </div>
                <div>
                  <img src="../../Source/pic.jpg" width="50px" />
                </div>
                <div>
                  <img src="../../Source/pic.jpg" width="30px" />
                </div>
                <div>
                  <img src="../../Source/pic.jpg" width="60px" />
                </div>
              </div>
            </li>
            <li>
              <b>end</b>
              <p>元素尺寸水平收缩为内容大小，沿着网格线右侧对齐</p>
              <div class="container case12-1" style="justify-items: end;">
                <div>
                  <img src="../../Source/pic.jpg" width="40px" />
                </div>
                <div>
                  <img src="../../Source/pic.jpg" width="50px" />
                </div>
                <div>
                  <img src="../../Source/pic.jpg" width="30px" />
                </div>
                <div>
                  <img src="../../Source/pic.jpg" width="60px" />
                </div>
              </div>
            </li>
            <li>
              <b>center</b>
              <p>元素尺寸水平收缩为内容大小，水平居中</p>
              <div class="container case12-1" style="justify-items: center;">
                <div>
                  <img src="../../Source/pic.jpg" width="40px" />
                </div>
                <div>
                  <img src="../../Source/pic.jpg" width="50px" />
                </div>
                <div>
                  <img src="../../Source/pic.jpg" width="30px" />
                </div>
                <div>
                  <img src="../../Source/pic.jpg" width="60px" />
                </div>
              </div>
            </li>
          </ul>
        </dd>
        <dd>
          <h4>align-items</h4>
          与justify-items类似
        </dd>
        <dd>
          <h4>缩写属性place-items</h4>
          <pre><code>place-items: &lt;align-items&gt; &lt;justify-items&gt;</code></pre>
          同属性可以写一个
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>整体对齐属性justify-content和align-content</dt>
        <dd>
          <i>语法</i>
          <pre><code>justify-content: normal | stretch | start | end | center | space-between | space-around | space-evenly;
align-content: normal | stretch | start | end | center | space-between | space-around | space-evenly;</code></pre>
        </dd>
        <dd>
          <h4>缩写place-content</h4>
          <pre><code>place-content: &lt;align-content&gt; &lt;justify-content&gt;</code></pre>
          同属性可以写一个
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>
          区间范围设置属性grid-column-start/grid-column-end和grid-row-start/grid-row-end
        </dt>
        <dd>
          <p><i>语法</i></p>
          应用在子项上
          <pre><code>grid-column-start: &lt;integer&gt; | &lt;name&gt; | &lt;integer&gt; &lt;name&gt; 
| span &lt;number&gt; | span &lt;name&gt; | auto</code></pre>
          <ul>
            <li>
              <p><b>&lt;integer&gt;</b></p>
              <p>
                指起止于第几条网格线（含）；可以是负整数，表示从右边数；不能是0
              </p>
              <div class="container case14-1 long">
                <div>item</div>
              </div>
            </li>
            <li>
              <p><b>&lt;name&gt;</b></p>
              <p>
                自定义网格线的名称。需注意的是，该名称有自动补全前缀-start和后缀-end的特性
              </p>
              <p>
                例如：grid-column-start写A，先找A，找不到的话找A-start；grid-column-start同理
              </p>
              <div class="container case14-2 long">
                <div>item</div>
              </div>
            </li>
            <li>
              <p><b>&lt;integer&gt;&lt;name&gt;</b></p>
              <p>
                表示名称为name的第integer条网格线（含）；若该名称的网格不够，则会自动创建足量的隐式网格
              </p>
              <p>如下例：</p>
              <pre><code>
.container { 
  grid: auto / [A] 20px [B] 40px [C] 60px;
}
.item {
  grid-column-start: B 3;
  grid-column-end: C;
}</code></pre>
              <p>由于没有3个B，所以隐式创建了B2，B3。所选区域就是C至B2</p>
              <input type="checkbox" />
              设置grid-auto-columns: 40px;
              <div class="container case14-3 long">
                <div>item</div>
              </div>
            </li>
            <li>
              <p><b>span&lt;number&gt;</b></p>
              <p>
                表示当前网格会跨越指定网格数量
              </p>
              <pre><code>grid-column: 3 span;</code></pre>
              <div class="container case14-4 long">
                <div>item1</div>
                <div>item2</div>
                <div>item3</div>
              </div>
            </li>
            <li>
              <p><b>span&lt;name&gt;</b></p>
              <p>
                表示当前网格会延伸，直到选中指定名称的网格（span语法详见下节）
              </p>
            </li>
            <li>
              <p><b>auto</b></p>
              <p>
                表示当前网格会延伸，直到选中指定名称的网格（span语法详见下节）
              </p>
            </li>
          </ul>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>span详解</dt>
        <dd>
          <p>类似table中的colspan和rowspan，表示合并单元格</p>
          <ul>
            <li>
              <p><b>span &lt;number&gt;</b></p>
              <div class="container case15-1">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
              </div>
            </li>
            <li>
              <p><b>span &lt;name&gt;</b></p>
              <div class="container case15-2">
                <div>1</div>
              </div>
            </li>
          </ul>
        </dd>
        <dt>缩写属性grid-column和grid-row</dt>
        <dd>不再赘述</dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>grid-area</dt>
        <dd>
          <p>
            该属性是grid-row(coulmn)-statr(end)四个属性的缩写，但也存在一种新的写法
          </p>
          <p><i>语法</i></p>
          <pre><code>grid-area: &lt;area-name&gt; |
&lt;row-start&gt; / &lt;column-start&gt; / &lt;row-end&gt; / &lt;column-end&gt;
          </code></pre>
          <p>
            其中，area-name指的是区域名称。
            <br />
            若有四个值，如上；
            <br />
            若有三个值，则column-end被省略；
            <br />
            若有两个值，则所有end被省略；
            <br />
            若有一个值，则只有row-start
          </p>
          <p>area-name见前面章节</p>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>自身对齐属性justify-self和align-self</dt>
        <dd>
          <ul>
            <li><b>auto</b></li>
            <li><b>normal</b></li>
            <li><b>stretch</b></li>
            <li><b>start</b></li>
            <li><b>end</b></li>
            <li><b>center</b></li>
            <li><b>baseline</b></li>
          </ul>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>缩写属性place-self</dt>
        <dd>
          <i>语法</i>
          <pre><code>place-self: &lt;align-self&gt; &lt;justify-self&gt;</code></pre>
          如果只有一个值，justify-self被省略
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
